<script lang="ts">
  import { onMount } from 'svelte';
  import { checkHealth } from '../lib/api';
  import UploadForm from './upload.svelte';
  import { t } from '../lib/i18n';
  
  let healthStatus = '正在检查...';
  let isServerOnline = false;
  
  onMount(async () => {
    try {
      const health = await checkHealth();
      healthStatus = $t('upload.status.online', { version: health.version }) as string;
      isServerOnline = true;
    } catch (error) {
      healthStatus = $t('upload.status.offline') as string;
      isServerOnline = false;
    }
  });
</script>

<svelte:head>
  <title>应用框架分析器</title>
</svelte:head>

<div class="container">
  <header>
    <h1>应用框架分析器</h1>
    <p class="status">
      服务器状态: 
      <span class={isServerOnline ? 'online' : 'offline'}>
        {healthStatus}
      </span>
    </p>
  </header>
  
  <main>
    <div class="intro">
      <h2>上传应用进行分析</h2>
      <p>
        支持多种应用平台（Android、iOS、Windows、macOS、Linux和HarmonyOS）的分析，
        识别应用使用的框架、库和技术栈。
      </p>
    </div>
    
    {#if isServerOnline}
      <UploadForm />
    {:else}
      <div class="error-message">
        <p>无法连接到分析服务器，请检查服务器是否正在运行。</p>
        <button on:click={() => window.location.reload()}>
          重试连接
        </button>
      </div>
    {/if}
  </main>
  
  <footer>
    <p>© 2023-2024 应用框架分析器</p>
  </footer>
</div>

<style>
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
  
  header {
    margin-bottom: 2rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
  }
  
  h1 {
    font-size: 2.5rem;
    color: #333;
    margin: 0 0 1rem;
  }
  
  .status {
    font-size: 0.9rem;
    color: #666;
  }
  
  .online {
    color: green;
    font-weight: bold;
  }
  
  .offline {
    color: red;
    font-weight: bold;
  }
  
  main {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .intro {
    margin-bottom: 2rem;
  }
  
  h2 {
    font-size: 1.8rem;
    color: #444;
    margin: 0 0 1rem;
  }
  
  .error-message {
    background-color: #fff3f3;
    border: 1px solid #ffcfcf;
    padding: 1rem;
    border-radius: 4px;
    margin-top: 1rem;
    text-align: center;
  }
  
  .error-message button {
    background-color: #4a90e2;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    margin-top: 0.5rem;
  }
  
  footer {
    text-align: center;
    color: #888;
    font-size: 0.8rem;
  }
</style>
